@charset "utf-8";

$fontsize:40;
@function rem($px) {
    @return $px/$fontsize * 1rem;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    header {
        width: 100%;
        height: rem(130);
        background: white;
        position: absolute;
        top: 0;
        .back {
            width: rem(123);
            height: rem(57);
            float: left;
            margin-left: rem(23);
            margin-top: rem(40);
            input[type="button"] {
                width: 100%;
                height: 100%;
                font-size: rem(26);
                border: 1px solid #FF9344;
                border-radius: rem(17);
                background: #FFFFFF;
            }
        }
        .title {
            width: rem(125);
            height: rem(27);
            font-size: rem(26);
            margin: 0 auto;
            margin-top: rem(65);
        }
        .star {
            width: rem(51);
            height: rem(48);
            float: right;
            margin-top: rem(54);
            margin-right: rem(22);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}

.carous{
    .carous-buy{
        width: rem(664);
        margin: 0 auto;
        h6{
            font-size: rem(72);
            color: #FF9344;
            font-weight: 300;
            float: left;
        }
        input[type="button"]{
            width: rem(111);
            height: rem(59);
            font-size: rem(30);
            float: right;
            background: #FF9344;
            border-radius:rem(18) ;
            color: #FFFFFF;
            margin-top: rem(33);
        }
    }
    .carous-appraise{
        width: rem(664);
        margin: 0 auto;
        margin-top: rem(48);
        .appaise-star{
            p{
                font-size: rem(30);
                float: left;
                span{
                    color: #FF9344;
                }
                img{
                    width: rem(37);
                    height: rem(36);
                    vertical-align: top;
                    margin-right: rem(15);
                }
            }
        }
        a{
            font-size: rem(26);
            color: #9c9c9c;
            float: right;
        }
    }
}
section {
    width: 100%;
    position: absolute;
    top: rem(130);
    bottom: 68px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .slideshow {
        width: 100%;
        position: relative;
        .swiper-container {
            width: rem(705);
        }
        .swiper-wrapper {
            width: 100%;
            margin-top: 0;
            .swiper-slide {
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

section .itemBox {
    width: 100%;
    .item-title{
        width: rem(664);
        height: rem(67);
        background: #FF9344;
        color: #FFFFFF;
        margin: 0 auto;
        margin-top: rem(37);
        p{
            font-size: rem(30);
            float: left;
            line-height: rem(67);
        }
        span{
            font-size: rem(46.72);
            float: right;
            line-height: rem(67);
        }
    }
    .item {
        width: rem(664);
        height: rem(176);
        margin: 0 auto;
        background: #FFFFFF;
    }
}

.item {
    padding-top: rem(10);
    .item-img {
        width: rem(176);
        height: rem(176);
        float: left;
        margin-right: rem(24);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .item-msg{
        width: rem(300);
        float: left;
        h5{
            font-size: rem(30);
            line-height: rem(50);
        }
        p{
            font-size: rem(24);
            color: #9C9C9C;
            line-height: rem(50);
        }
        a{
            font-size: rem(20);
            color: #FF9344;
            line-height: rem(34);
        }
        .item-score{
            font-size: rem(26);
            .starBox{
                .small-star{
                    width: rem(35);
                    height: rem(34);
                    float: left;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
    .item-btn{
        height: rem(176);
        line-height: rem(176);
        float: right;
        input[type="button"]{
            width: rem(111);
            height: rem(59);
            font-size: rem(30);
            background: #FF9344;
            color: #FFFFFF;
            border-radius: rem(18);
        }
    }
}

footer {
    width: 100%;
    height: 68px;
    background: white;
    position: absolute;
    bottom: 0;
    a {
        color: #000000;
    }
    ul li {
        width: 25%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: 8px;
        box-sizing: border-box;
        i {
            color: transparent;
            -webkit-text-stroke: 1px #FF9344;
        }
        .iconfont{
            font-size: rem(60);
        }
        p {
            font-size: 13px;
        }
        &:hover .iconfont {
            color: #FF9344;
        }
    }
}